import { Button } from "@renderer/components/ui/base/button";
import { Link } from "@renderer/components/ui/base/link";
import { Modal } from "@renderer/components/ui/base/modal";
import { useTranslation } from "react-i18next";

const { openExternal } = window.service.shellService;

interface NewVersionModalProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}

export function NewVersionModal({
  isOpen,
  onOpenChange,
}: NewVersionModalProps) {
  const { t } = useTranslation();
  const goToDownloadNewVersion = async () => {
    await openExternal("https://github.com/302ai/302-AI-Studio-sv/releases");
    onOpenChange(false);
  };

  return (
    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
      <Modal.Content size="xl">
        <Modal.Header>
          <Modal.Title className="!text-xl">
            🎉 {t("modal.title")}(v25.43) 🎉
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p className="font-bold">{t("modal.body_1")}</p>
          <ul className="my-2 list-disc pl-5">
            <li className="my-1">🚀 {t("modal.body_2")}</li>
            <li className="my-1">🎨 {t("modal.body_3")}</li>
            <li className="my-1">⚙️ {t("modal.body_4")}</li>
            <li className="my-1">💡 {t("modal.body_5")}</li>
            <li className="my-1">✨ {t("modal.body_7")}</li>
          </ul>
          <p className="font-bold">{t("modal.body_6")}</p>
          <p className="mt-4 font-bold text-destructive text-sm">
            🚨 {t("modal.body_9")}
          </p>
          <p className="mt-4 text-muted-fg text-sm">
            {t("modal.body_8")}{" "}
            <Link
              className="cursor-pointer text-primary text-sm hover:underline"
              onPress={() => openExternal("https://help.302.ai/")}
            >
              {t("settings.about-settings.help-center.title")}
            </Link>
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Modal.Close>{t("modal.close")}</Modal.Close>
          <Button onClick={goToDownloadNewVersion}>{t("modal.confirm")}</Button>
        </Modal.Footer>
      </Modal.Content>
    </Modal>
  );
}
